<template>
  <el-form ref="refForm" :size="size" label-width="150px" :validate-on-rule-change="false">
      <template v-for="(colum, index) in columList">
          <div class="form-title" :key="index+'title'">{{colum.name}}</div>
          <el-form-item v-for="(item, index2) in colum.columChild" :key="index2+'list'+index" :label="item.label">
            <div style="display: flex;">
              <el-input style="padding-right: 20px" placeholder="请输入" v-model="item.value" />
              <el-button v-for="item2 in item.btn || []" :key="item2.params" type="primary" plain @click="openMessage(item2.params)">{{item2.title}}</el-button>
            </div>
            <div class="tip">{{item.tip}}</div>
          </el-form-item>
      </template>
      <el-divider></el-divider>
      <el-button type="primary">保存</el-button>
  </el-form>
</template>

<script>
  export default {
    data() {
      return {
        formData: {
          url: 'https://free-api.heweather.net/s6/weather/now'
        }
      }
    },
    props: {
      columList: {
        type: Array,
        default() {
          return [1,2,3,4,5]
        }
      }
    },
    computed: {
      size() {
        return this.$store.getters.size
      }
    },
    methods: {
      openMessage(title) {
        this.$emit('openMessage', title)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-form-item{
    margin-bottom: 32px;
    margin-top: 20px;
    padding-left: 20px;
    color: #606266;
    font-weight: bold;
    position: relative;
  }
  .tip{
    position: absolute;
    left: 0;
    top: 36px;
    padding-left: 5px;
    line-height: 20px;
    font-weight: 400;
    font-size:12px;
    color:#999999;
    z-index: 6;
  }
  .form-title{
    border-left: 8px solid #409eff;
    line-height: 30px;
    padding-left: 16px;
  }
  ::v-deep .el-form-item:last-child{
    margin-bottom: 20px;
  }
</style>